<template>
  <div>
    <div style="margin-top: 10px">
      <div style="padding: 10px 0; border-bottom: 1px solid #ccc; display: flex">
        <div style="flex: 1;font-size: 18px">公益兑换</div>
      </div>
      <!--      商品-->
      <el-row :gutter="10">
        <!--    图片-->
        <el-col :span="12">
          <el-card>
            <div style="height: 500px; display: flex; align-items: center; justify-content: center;">
              <el-image :src="mainImg" fit="contain" style="max-height: 100%; max-width: 100%;"></el-image>
            </div>
          </el-card>
        </el-col>

        <!--    商品细节-->
        <el-col :span="12">
          <el-card style="min-height: 548px;">
            <div style="text-align: right">
            </div>
            <div style="padding: 10px 0; font-size: 20px; font-weight: bold">{{ goods.name }}</div>
            <div style="padding: 10px 0; color: #666; font-size: 14px">{{ goods.description }}</div>
            <div style="padding: 10px 0; color: #999;">
              <span>上架时间：</span>
              <span style="margin-left: 20px; color: #666">{{ goods.createTime }}</span>
            </div>

            <div style="padding: 10px 0">
              <span style="color: #999">所需积分</span>
              <span style="margin-left: 10px; color: orangered; font-size: 20px"> {{ goods.points }}</span>
            </div>
            <div style="padding: 10px 0; color: #999">
              库存：{{ goods.store }}
            </div>

            <div style="padding: 10px 0; color: #999">
              种植地：{{ goods.address }}
            </div>

            <div style="padding: 10px 0; color: #999;">
              <span>注：</span>
              <span style="margin-left: 20px; color: #666">
                由“电商公益平台”提供公益绿植，并提供后续护理，培育，养殖等工作。
              </span>
            </div>
            <div style="padding: 10px 0; color: #999">
              我的积分：{{ userInfo.points }}
            </div>
            <div style="margin-top: 20px; padding: 10px 0">
              <el-input-number v-model="num" :min="1" :max="10" label="兑换数量" style="width: 100px"></el-input-number>
              <el-button style="margin-left: 10px; background-color: orangered; color: white" @click="buyNow">立即兑换
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from "@/utils/request";

export default {
  name: "PublicGoods",
  data() {
    return {
      url: sessionStorage.getItem("url"),
      messages: [],
      dialogFormVisible: false,
      entity: {},
      address: '',
      mainImg: '',
      num: 1,
      id: 1,
      user: {},
      userInfo: {},
      goods: {imgs: []},
      praiseFlag: false
    };
  },
  created() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.id = this.$route.query.id
    this.load()
  },
  methods: {
    buyNow() {
      if (this.goods.store - this.num < 0) {
        this.$message({
          type: 'warning',
          message: '库存不足！'
        })
        return
      }
      if (this.userInfo.points < this.num * this.goods.points) {
        this.$message({
          type: 'warning',
          message: '积分不足！'
        })
        return
      }
      // 提交订单
      API.get("/system/public_product/pay/" + this.id + "?count=" + this.num).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '提交成功！'
          })
          this.$router.replace("/front/myPublic")
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    load() {
      API.get("/system/public_product/" + this.id).then(res => {
        this.goods = res.data
        this.mainImg = this.url + this.goods.imgs
      }),
      API.get('/system/user/' + this.user.userId).then(res => {
        this.userInfo = res.data || {}
      })
    },
  },
};
</script>

<style scoped>

</style>
